<template>
  <div class="Log">
    <h3 class="title">房间日志</h3>
    <div class="log-list"
         id="scrollBox">
      <div class="log-item"
           v-for="(log, index) in logList"
           :key="index"
           v-html="log">
        {{ log }}
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from "../utils/EventBus";
import { LOG_TO_SCREEN } from "../utils/EventBus/events";

export default {
  name: "log",
  data () {
    return {
      logList: [],
    };
  },
  mounted () {
    // 全局事件接口
    eventBus.$on(LOG_TO_SCREEN, (c) => {
      this.logList.push(c);
      // microTask
      this.$nextTick(() => {
        this.adjustScrollPosition();
      });
    });
  },
  methods: {
    adjustScrollPosition () {
      const scrollBox = document.getElementById("scrollBox");
      scrollBox.scrollTop = scrollBox.scrollHeight - scrollBox.clientHeight;
    },
  },
};
</script>

<style scoped>
.Log {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 12px;
}
.title {
  box-sizing: border-box;
  padding: 0 0 12px;
  text-align: center;
}
.log-list {
  box-sizing: border-box;
  border: gray dashed 2px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  font-family: simsun;
  overflow-y: auto;
}
.log-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.log-list::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.log-list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.log-item {
  padding: 3px 0;
}
</style>

<style>
.text-gray {
  color: gray;
}
.text-blue {
  color: #1590c5;
}
.text-orange {
  color: #ff7b00;
}
</style>